<script setup lang="ts">
import {reactive, ref, watch} from 'vue'
import {formatToDate} from "@/utils/dateUtil";
import {DemandInfoTradingUnitApi} from "@/api/dd/demandinfotradingunit";

const props = defineProps({
  mainId: {
    type: Number,
    default: 0
  },
  tradingUnitId: {
    type: Number,
    default: 0
  },
  zhuanrangriqiList: {
    type: Array,
    default: () => []
  },
  tableList: {
    type: Array,
    default: () => []
  },
  formDataId: {
    type: Number,
    default: 0
  },
  formType: {
    type: Number,
    default: 0
  }
})


// 选中的转让日期
const zhuanrangriqiValue = ref('')

// 重置筛选条件
const resetData = () => {
  zhuanrangriqiValue.value = ''
}

// 获取表格数据
const getDataList = () => {

}

// 提交截图
const submitData = async (item, index) => {
  // TODO request

          ElMessageBox.confirm('是否确认保存当前图片内容?').then(async () => {
          
            if (item.transferorImg && typeof item.transferorImg !== 'string') {
              item.transferorImg = item.transferorImg.join(',')
            }
            if (item.transfereeImg && typeof item.transfereeImg !== 'string') {
              item.transfereeImg = item.transfereeImg.join(',')
            }
            if (item.paymentImg && typeof item.paymentImg !== 'string') {
              item.paymentImg = item.paymentImg.join(',')
            }
           await DemandInfoTradingUnitApi.updateDemandInfoTradingUnit(item)
          }).catch(() => {

          })
}

// 锚点跳转
const scrollToAnchor = (anchorId) => {
  if (!anchorId) return false
  const target = document.getElementById(`${anchorId}`);
  if (target) {
    target.scrollIntoView({ behavior: 'smooth' });
  }
};

// 根据时段返回对应的颜色
const getTimePeriodColor = (timePeriod: string) => {
  const peakPeriods = ['07:00-08:00','08:00-09:00', '17:00-18:00', '18:00-19:00', '19:00-20:00', '20:00-21:00', '21:00-22:00', '22:00-23:00'];
  const offPeakPeriods = ['09:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'];
  const valleyPeriods = ['00:00-01:00', '01:00-02:00', '02:00-03:00', '03:00-04:00', '04:00-05:00', '05:00-06:00', '06:00-07:00', '23:00-00:00'];
  if (peakPeriods.includes(timePeriod)) {
    //绿色
    return 'red'; // 高峰时段颜色
  } else if (offPeakPeriods.includes(timePeriod)) {
    return 'green'; // 平峰时段颜色
  } else if (valleyPeriods.includes(timePeriod)) {

    //橘色
    return 'orange'; // 低谷时段颜色
  }
};

const dataFormList: any = reactive({
  data: []
})
const tableListd: any = ref([])

watch(() => props.tableList, (newVal) => {
  // console.log(newVal, 'newVal')
  dataFormList.data = newVal.filter(item => item)
  // console.log(dataFormList.data, 'dataFormList.data')
  dataFormList.data = dataFormList.data.map(item => {
    return {
      ...item,
      datedd: item.transferDateStart + '-' + item.transferDateEnd
    }
  })
  tableListd.value = dataFormList.data
})

defineExpose({
  tableList: tableListd,
  dataFormList: dataFormList,
  tradingUnitId: props.tradingUnitId,
  submitData,
})
// 更新实际操作金额
const updateActualAmount = (item) => {
  const totalPrice = item.demandInfoTradingUnitInformationControllers.reduce((sum, row) => {
    // 将 row.electricityPrice 转换为数字类型
    const price = Number(row.electricityPrice) || 0;
    return sum + price;
  }, 0);
  item.actualAmount = totalPrice.toFixed(2);
};

const emit = defineEmits(['updateTransferorImg']);

// 处理图片上传成功事件
const handleUploadSuccess = (item) => {
  console.log(item, 'item')
  emit('updateTransferorImg', item.tradingUnitId, item.transferorImg);
};

</script>

<template>
  <el-row>
    <el-row style="width: 100%;">
      <el-col :span="2">转让日期：</el-col>
      <el-col :span="6">
        <el-select v-model="zhuanrangriqiValue" placeholder="转让日期" style="width: 240px">
          <el-option
            v-for="(child, childIndex) in zhuanrangriqiList"
            :key="childIndex"
            :label="child"
            :value="child"
          />
        </el-select>
      </el-col>
      <el-button type="default" class="sub-btn" @click="scrollToAnchor(zhuanrangriqiValue)">跳转</el-button>
      <!-- <el-button type="default" plain @click="resetData">重置</el-button> -->
    </el-row>
  </el-row>

  <el-col>
    <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

    <div style="width: 100%; min-height: 100%; max-height: 100%; overflow-y: auto; border: 1px solid #409eff; padding: 10px; box-sizing: border-box;">
      <el-row v-for="(item, index) in dataFormList.data" :key="index" :id="item.transferDateStart + '-' + item.transferDateEnd">
      <el-row style="width: 100%;">
        <el-col :span="2">转让日期：</el-col>
        <el-col :span="10">
          {{ (item.transferDateStart ? item.transferDateStart.replace(/T/g, ' ').replace(/\.000Z/g, '') : '') + '——' + (item.transferDateEnd ? item.transferDateEnd.replace(/T/g, ' ').replace(/\.000Z/g, '') : '') }}
        </el-col>
        <el-col :span="2">转让类型：</el-col>
        <el-col :span="10">
          <div>{{ item.type ? [{ label: '转入', value: '1' }, { label: '转出', value: '2'}].find(child => child.value === item.type).label : '' }}</div>
        </el-col>
      </el-row>

      <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

      <el-row style="width: 100%;">
        <el-col :span="2">参与交易单元：</el-col>
        <el-col :span="10">
          <!-- //判断notTrading是否为空，不为空则显示 -->
          <el-row v-if="item.notTrading">
            {{ item.notTrading }}
          </el-row>
          <!-- //判断tradingUnitDO是否为空，不为空则显示 -->
          <el-row v-if="item.participateTradingDo">
            {{ item.participateTradingDo.name + '——' + item.participateTradingDo.tradingUnit }}
          </el-row>
        </el-col>
        <el-col :span="2">预计操作日期：</el-col>
        <el-col :span="10">
          {{ item.expectedDate ? item.expectedDate.replace(/T/g, ' ').replace(/\.000Z/g, '') : '' }}
        </el-col>
      </el-row>

      <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

      <el-row style="width: 100%;">
        <el-col :span="14">
          <div class="table-zhuanrang label bg-color font-color">转让信息</div>

          <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

          <el-table :data="item.demandInfoTradingUnitInformationControllers" style="width: 100%">
            <el-table-column label="序号" width="180" >
              <template #default="{ $index }">
                {{ $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="periodStart" label="时段" width="180">
              <template #default="scope">
                <span :style="{ color: getTimePeriodColor(scope.row.periodStart+'-'+scope.row.periodEnd) }">
                <!-- 修改部分：判断时间是否为 23:00 - 00:00 并转换 -->
               {{ scope.row.periodStart === '23:00' && scope.row.periodEnd === '00:00' ? '23:00 —— 24:00' : scope.row.periodStart + ' —— ' + scope.row.periodEnd }}
              </span>
              </template>
            </el-table-column>
            <el-table-column prop="electricity" label="电量MWh" width="180">
              <template #default="scope">
                <span>{{ scope.row.electricity }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="electricityPrice" label="电价 元/MWh" width="180">
              <template #default="scope">
                <span>{{ scope.row.electricityPrice }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="9" :offset="1">
          <div class="table-zhuanrang label bg-color font-color">操作金额</div>
          <div>
            <div class="shijicaozuo-jine">实际操作金额</div>
            <el-row>
              <el-col :span="2">¥</el-col>
              <el-col :span="22">
                <span>{{ item.actualAmount }}</span></el-col>
            </el-row>
          </div>

          <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

          <div class="shijicaozuo-jine">操作详情</div>

          <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

          <div>操作确认</div>
          <div class="caozuo-box">

            <div class="caozuo-box-zhuan">转让方截图：</div>
            <el-row>
              <UploadImgs v-model="item.transferorImg" @on-upload-success="handleUploadSuccess(item)"/>
            </el-row>
            <el-row class="update-time">上传时间：{{ formatToDate(item.createTime) }}</el-row>
          </div>

          <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

          <!-- <el-row class="submit-dd">
            <el-button type="default" class="sub-btn" @click="submitData(item, index)">提交</el-button>
          </el-row> -->

          <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

          <div class="caozuo-box">

            <div class="caozuo-box-zhuan">受让方操作截图：</div>
            <el-row>
              <UploadImgs v-model="item.transfereeImg" />
            </el-row>
            <el-row class="update-time">上传时间：{{ formatToDate(item.createTime) }}</el-row>

            <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

            <!-- <el-row>
              <el-col :span="4" :offset="20">
                <el-button type="default" class="sub-btn" @click="submitData(item, index)">提交</el-button>
              </el-col>
            </el-row> -->

          </div>

          <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

          <div>付款确认</div>
          <div class="caozuo-box">

            <div class="caozuo-box-zhuan">付款截图：</div>
            <el-row>
              <UploadImgs v-model="item.paymentImg"/>
            </el-row>

            <el-row>&nbsp;&nbsp;&nbsp;&nbsp;</el-row>

            <el-row>
              <el-col :span="4" :offset="20">
                <el-button type="default" class="sub-btn" @click="submitData(item)">保存</el-button>
              </el-col>
            </el-row>

          </div>
        </el-col>
      </el-row>
    </el-row>
    </div>
  </el-col>
</template>

<style scoped lang="scss">

.label {
  width: 100px !important;
  text-align: center !important;
  padding: 8px !important;
  color: #fff;
  font-weight: bold !important;
  font-size: 18px;
}

.sub-btn {
  background-color: #409eff!important;
  color: #fff !important;
}

.bg-color {
  background-color: #f4f4f5 !important;
}
.font-color {
  color: #409eff;
}

.table-zhuanrang {
  width: 100%;
  padding: 8px 12px;
  background-color: #f8f8f8;
  font-size: 20px;
  font-weight: bold;
  margin: 14px 0;
  color: #fff;
  border-radius: 4px;
  // 修改文字颜色为黑色
  color: black; 
}

.shijicaozuo-jine {
  font-weight: bold;
  margin: 10px 0;
}

.caozuo-box {
  width: calc(100% - 40px);
  border-left: 1px dashed #ccc;
  margin-left: 20px;
  padding-left: 20px;
}

.update-time {
  margin: 8px 20px;
}

.caozuo-box-zhuan {
  margin: 8px 20px;
}

.submit-dd {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

</style>
